<template>
    <container type="top-header" class="g-width100 g-height100"  aside-style="width:320px;" main-style="padding:0px;">
        <div slot="aside">
            <MpMaterialNewsPreview
                    :news-item="localNewsItem"
                    :item-click="itemClick"
                    :show-add-button="showAddButton"
                    v-on:newsItemChange="newsItemChange"
            ></MpMaterialNewsPreview>
            <div v-if="showAddButton" class="g-flex g-flex-align-between g-margin-top30">
                <el-button icon="el-icon-top" class=" g-margin0" size="mini" :disabled="selectedItem.index == null" @click="menuMove('up')">上移</el-button>
                <el-button icon="el-icon-bottom" class=" g-margin0" size="mini"  :disabled="selectedItem.index == null" @click="menuMove('down')">下移</el-button>
            </div>
            <slot></slot>
        </div>
        <div slot="main" class="g-width100 g-height100">
            <Form
                    ref="formEdit"
                    :form-data="selectedItem.item"
                    :form-items="formItems"
            ></Form>

        </div>
    </container>
</template>

<script>
    import Container from '../../../../common-util/src/components/page/Container.vue'
    import MpMaterialNewsPreview from './MpMaterialNewsPreview.vue'

    import Form from '../../../../common-util/src/components/page/Form.vue'

    export default {
        components:{
            Form,
            MpMaterialNewsPreview,
            Container
        },
        props:{
            showAddButton:{
                type: Boolean,
                default: true
            },
            newsItem:{
                type: Array,
                default: function () {
                    return []
                }
            },
            formOperations:{
                type: Array,
                default: function () {
                    return []
                }
            },
            thumbMediaIdPlaceHolder:{
                type: String,
                default: '图文消息的封面图片素材id（必须是永久mediaID），永久素材资源有限，如想利用已上传过的，请直接输入媒体id'
            },
            // 图文消息的封面图片素材id是否为永久素材
            thumbMediaIdUploadUrl:{
                type: [String,Function]
            },
            thumbMediaIdTips:{
                type: String,
                default: '图片（image）: 10M，支持bmp/png/jpeg/jpg/gif格式'
            }
        },
        computed: {
            formItems(){

                let items = [
                    {
                        field: {
                            name: 'title'
                        },
                        element:{
                            required: true,
                            label: '图文标题',
                        }
                    },
                    {
                        field: {
                            name: 'thumbMediaId'
                        },
                        element:{
                            type: 'upload',
                            upload:{
                                action: this.thumbMediaIdUploadUrl,
                                nullActionMessage: '请选择公众号',
                                responseValueFormat: (res)=>{
                                    return res.mediaId
                                },
                                showPreviewButton: false
                            },
                            required: true,
                            tips: this.thumbMediaIdTips,
                            placeholder: this.thumbMediaIdPlaceHolder,
                            label: '封面图片',
                        }
                    },
                    {
                        field: {
                            name: 'showCoverPic'
                        },
                        element:{
                            type: 'switch',
                            switch:{
                                activeText: '显示',
                                inactiveText: '不显示'
                            },
                            label: '是否显示封面',
                            placeholder: '是否显示封面',
                            required: true
                        }
                    },
                    {
                        field: {
                            name: 'author'
                        },
                        element:{
                            label: '作者'
                        }
                    },
                    {
                        field: {
                            name: 'digest'
                        },
                        element:{
                            label: '图文消息的摘要',
                            placeholder: '图文消息的摘要，仅有单图文消息才有摘要，多图文此处为空。如果本字段为没有填写，则默认抓取正文前64个字。'
                        }
                    },
                    {
                        field: {
                            name: 'content'
                        },
                        element:{
                            label: '具体内容',
                            required: true
                        }
                    },
                    {
                        field: {
                            name: 'contentSourceUrl'
                        },
                        element:{
                            label: '阅读原谅地址',
                            required: true
                        }
                    },
                    {
                        field: {
                            name: 'needOpenComment'
                        },
                        element:{
                            type: 'switch',
                            switch:{
                                activeText: '打开',
                                inactiveText: '不打开'
                            },
                            label: '打开评论'
                        }
                    },
                    {
                        field: {
                            name: 'onlyFansCanComment'
                        },
                        element:{
                            type: 'switch',
                            switch:{
                                activeText: '粉丝可评价',
                                inactiveText: '所有人可评价'
                            },
                            label: '粉丝才可评论'
                        }
                    }
                ]
                this.formOperations.forEach(item=>{
                    items.push(item)
                })
                return items
            }
        },
        data(){
            return {
                localNewsItem: this.newsItem,
                selectedItem:{
                    index: null,
                    item: null
                },
                addToWxServerLoading: false,
            }
        },
        mounted() {

        },
        methods:{
            itemClick(index, item) {
                this.selectedItem.index = index
                this.selectedItem.item = item
                this.$emit('currentItemChange',this.selectedItem)
            },
            newsItemChange(val){
                this.localNewsItem = val
            },
            // 菜单移动操作
            menuMove(direction){
                let index = this.selectedItem.index
                let method = {
                    // 上移
                    up: ()=>{
                        if(index == 0){
                            return
                        }
                        let tempItem = this.localNewsItem.splice(index,1)[0]
                        this.localNewsItem.splice(index - 1,0,tempItem)

                        this.itemClick(index -1,this.localNewsItem[index - 1])
                    },
                    // 下移
                    down: ()=>{
                        if(index == this.localNewsItem.length - 1){
                            return
                        }
                        let tempItem = this.localNewsItem.splice(index,1)[0]
                        this.localNewsItem.splice(index + 1,0,tempItem)
                        this.itemClick(index +1,this.localNewsItem[index + 1])
                    }
                }
                method[direction]()

            },

            // 删除编辑项
            deleteCurrentNews(){
                this.$refs.formEdit.resetForm()
                this.localNewsItem.splice(this.selectedItem.index,1)
                this.itemClick(null,null)
            },
            // 保存当前项
            saveCurrentNews() {
                this.$refs.formEdit.validateAndSubmitForm((form)=>{
                    for (let key in form) {
                        this.selectedItem.item[key] = form[key]
                    }
                    this.localNewsItem.splice(this.selectedItem.index,1,this.selectedItem.item)
                    this.itemClick(this.selectedItem.index,this.selectedItem.item)
                    this.$message.success('保存成功')
                })
            },

            // 获取被选中项
            getSelectedItem(){
                return this.selectedItem
            },
            getNewsItem(){
                return this.localNewsItem
            },
            getFormEdit() {
                return this.$refs.formEdit
            }

        },
        watch:{
            newsItem(val) {
                this.localNewsItem = val
            }
        }
    }
</script>

<style scoped>

</style>